<template>
  <div>
    <!-- <header-page></header-page> -->
    <a href="#"><div id="topbanner"></div></a>
    <!-- 顶部导航 -->
    <div class="top-nav">
      <div class="top-nav-wrapper">
        <ul class="top-nav-l">
          <li class="menu">
            <a href="#"
              ><span class="icon icon-star"></span>收藏鲜花网(hua.com)</a
            >
          </li>
          <li class="menu menu-dropdown">
            <a href="#"><span class="icon icon-weixin"></span>关注微信</a>
            <div class="dropdown-box">
              <img
                src="../../assets/images/homeimg/w/wxguanjia_qrcode.png"
                width="124"
              />
              <p>扫码关注<br />回复"礼物" 更多惊喜！</p>
            </div>
          </li>
          <li class="menu menu-dropdown">
            <a href="#"><span class="icon icon-mobile"></span>花礼网app</a>
            <div class="dropdown-box">
              <img
                src="../../assets/images/homeimg/w/app_download_qrcode_2021.png"
                width="120"
              />
              <p>新人专享100元APP礼包</p>
            </div>
          </li>
        </ul>
        <ul class="top-nav-r">
          <!--登陆状态信息显示start-->
          <li class="menu login" id="LoginInfo"  v-if="this.$store.state.telnum == ''">
            <router-link to='/login' href="" id="btn-login">您好，请登录</router-link>
            <router-link to='/reginster' id="btn-reg"> 注册</router-link>
          </li>
          <li class="menu login" id="LoginInfo"  v-if="this.$store.state.telnum != ''">
            <router-link to='/menberlenter'>{{this.$store.state.telnum}}</router-link>
          </li>
          <!--登陆状态信息显示end-->
          <li class="menu">
            <a href="#">订单查询</a>
          </li>
          <li class="menu menu-dropdown">
            <router-link to='/help'>客户服务<span class="icon-arrow"></span></router-link>
            <div class="dropdown-box dropdown-box-service">
              <p><a href="#">在线付款</a></p>
              <p><a href="#">帮助中心</a></p>
              <p><a href="#">售后服务</a></p>
              <p><a href="#">配送范围</a></p>
              <p><a href="#">留言反馈</a></p>
            </div>
          </li>
          <!--购物车信息显示start-->
          <li class="menu">
            <a href="#/" rel="nofollow" target="_blank">
              购物车
              <span class="text-primary" id="gwcCount">(0)</span>
            </a>
          </li>
          <!--购物车信息显示end-->
          <li class="menu slogan">中国鲜花礼品网:中国鲜花网领先品牌</li>
        </ul>
      </div>
    </div>
    <!-- 头部 -->
    <div id="header" class="clearfix">
      <div class="header-container">
        <div class="logo">
          <a href="#" class="logo-nav"></a>
        </div>
        <div class="search-box">
          <div class="search-box-group">
            <div class="search-box-icon">
              <span class="icon icon-search"></span>
            </div>
            <input
              name="keyword"
              type="text"
              class="search-box-input"
              placeholder="商品搜索"
            />
            <span class="search-box-btn">
              <button class="btn btn-primary">搜索</button>
            </span>
          </div>
          <div class="search-box-hotwords">
            <a href="#">红玫瑰</a>
           <router-link to="/yongflower">永生花</router-link>
            <a href="#">生日鲜花</a
            ><a href="#">礼品卡</a>

          </div>
        </div>
        <div class="service serviceDefault">
          <div class="service-item">
            <span class="icon icon-phone"></span>
            <div class="service-item-info">400-889-8188</div>
          </div>
          <div class="service-item">
            <a id="header-chat" href="#">
              <span class="icon icon-headset"></span>
              <div class="service-item-info infoo">在线客服</div>
            </a>
          </div>
        </div>
      </div>
    </div>
    <!-- 导航 -->
    <div id="navi" class="clearfix">
      <div class="navi-container">
        <div class="navi-categorys">
          <h3 class="categorys-title">
            <span class="icon icon-category"></span>
            <a href="#"><span class="fll">所有分类</span></a>
          </h3>
          <div class="dropdown-cate">
            <div class="dropdown-cate-item">
              <h4><a href="#">鲜花用途</a></h4>
              <ul class="cate-list cate-list-inline">
                <li><a href="#">爱情鲜花</a></li>
                <li><a href="#">生日鲜花</a></li>
                <li><a href="#">友情鲜花</a></li>
                <li><a href="#">问候长辈</a></li>
                <li><a href="#">探病慰问</a></li>
                <li><a href="#">道歉鲜花</a></li>
                <li><a href="#">祝贺鲜花</a></li>
                <li><a href="#">婚庆鲜花</a></li>
                <li><a href="#">商务鲜花</a></li>
              </ul>
            </div>
            <div class="dropdown-cate-item">
              <h4><a href="#">鲜花花材</a></h4>
              <ul class="cate-list cate-list-inline">
                <li><a href="#">玫瑰</a></li>
                <li><a href="#">康乃馨</a></li>
                <li><a href="#">百合</a></li>
                <li><a href="#">向日葵</a></li>
                <li><a href="#">扶郎</a></li>
                <li><a href="#">郁金香</a></li>
                <li><a href="#">马蹄莲</a></li>
              </ul>
            </div>
            <div class="dropdown-cate-item cate-pop">
              <a href="#"
                ><h4>永生花<span class="icon icon-arrow-right"></span></h4
              ></a>
              <div class="right-pop">
                <div class="right-pop-list">
                  <p class="right-pop-title">永生花类别</p>
                  <div class="right-pop-items">
                    <a href="#"
                      ><img src="../../assets/images/homeimg/w/sort_Vase.png" />
                      <p>永生瓶花</p>
                    </a>
                    <a href="#"
                      ><img src="../../assets/images/homeimg/w/sort_Box.png" />
                      <p>经典花盒</p>
                    </a>
                    <a href="#"
                      ><img
                        src="../../assets/images/homeimg/w/sort_Special.png"
                      />
                      <p>特色永生花</p>
                    </a>
                    <a href="#"
                      ><img
                        src="../../assets/images/homeimg/w/sort_GiantRose.png"
                      />
                      <p>巨型玫瑰</p>
                    </a>
                  </div>
                </div>
                <div class="right-pop-list">
                  <p class="right-pop-title">对象</p>
                  <div class="right-pop-items">
                    <a href="#"
                      ><img
                        src="../../assets/images/homeimg/w/use_Girlfriend.png"
                      />
                      <p>送女友</p>
                    </a>
                    <a href="#"
                      ><img
                        src="../../assets/images/homeimg/w/use_Boyfriend.png"
                      />
                      <p>送男友</p>
                    </a>
                    <a href="#"
                      ><img src="../../assets/images/homeimg/w/use_Elder.png" />
                      <p>送长辈</p>
                    </a>
                    <a href="#"
                      ><img
                        src="../../assets/images/homeimg/w/use_Friend.png"
                      />
                      <p>送朋友</p>
                    </a>
                  </div>
                </div>
              </div>
              <ul class="cate-list cate-list-inline">
                <li>
                  <a href="#">永生瓶花</a>
                </li>
                <li>
                  <a href="#">经典花盒</a>
                </li>
                <li>
                  <a href="#">特色永生花</a>
                </li>
              </ul>
            </div>
            <div class="dropdown-cate-item cate-pop">
              <a href="#"
                ><h4>蛋糕<span class="icon icon-arrow-right"></span></h4
              ></a>
              <div class="right-pop">
                <div class="right-pop-list">
                  <p class="right-pop-title">蛋糕品牌</p>
                  <div class="right-pop-items square">
                    <a href="#"
                      ><img
                        src="../../assets/images/homeimg/w/cake_ganso.png"
                      />
                      <p>元祖蛋糕</p>
                    </a>
                    <a href="#"
                      ><img src="../../assets/images/homeimg/w/cake_xfxb.png" />
                      <p>幸福西饼蛋糕</p>
                    </a>
                    <a href="#"
                      ><img
                        src="../../assets/images/homeimg/w/cake_21cake.png"
                      />
                      <p>廿一客蛋糕</p>
                    </a>
                    <a href="#"
                      ><img
                        src="../../assets/images/homeimg/w/cake_boncake.png"
                      />
                      <p>BONCAKE蛋糕</p>
                    </a>
                    <a href="#"
                      ><img
                        src="../../assets/images/homeimg/w/cake_waffleboy.png"
                      />
                      <p>窝夫小子蛋糕</p>
                    </a>
                    <a href="#"
                      ><img
                        src="../../assets/images/homeimg/w/cake_cakeboss.png"
                      />
                      <p>CAKEBOSS蛋糕</p>
                    </a>
                    <a href="#"
                      ><img
                        src="../../assets/images/homeimg/w/cake_mcake.png"
                      />
                      <p>Mcake蛋糕</p>
                    </a>
                    <a href="#"
                      ><img
                        src="../../assets/images/homeimg/w/cake_cheesecake.png"
                      />
                      <p>心之和蛋糕</p>
                    </a>
                    <a href="#"
                      ><img
                        src="../../assets/images/homeimg/w/cake_pantry.png"
                      />
                      <p>派悦坊蛋糕</p>
                    </a>
                    <a href="#"
                      ><img
                        src="../../assets/images/homeimg/w/cake_micamika.png"
                      />
                      <p>米卡米卡蛋糕</p>
                    </a>
                    <a href="#"
                      ><img
                        src="../../assets/images/homeimg/w/cake_lecake.png"
                      />
                      <p>诺心蛋糕</p>
                    </a>
                    <a href="#"
                      ><img
                        src="../../assets/images/homeimg/w/cake_vcaketop.png"
                      />
                      <p>Vcake蛋糕</p>
                    </a>

                    <a href="#"
                      ><img src="../../assets/images/homeimg/w/cake_all.png" />
                      <p>全国蛋糕</p>
                    </a>
                  </div>
                </div>
                <div class="right-pop-list">
                  <p class="right-pop-title">蛋糕城市</p>
                  <div class="right-pop-items cities">
                    <a href="#">北京</a>
                    <a href="#">上海</a>
                    <a href="#">广州</a>
                    <a href="#">深圳</a>
                    <a href="#">天津</a>
                    <a href="#">成都</a>
                    <a href="#">重庆</a>
                    <a href="#">西安</a>
                    <a href="#">苏州</a>
                    <a href="#">杭州</a>
                    <a href="#">南京</a>
                    <a href="#">合肥</a>
                    <a href="#">武汉</a>
                    <a href="#">郑州</a>
                    <a href="#">长沙</a>
                    <a href="#">南昌</a>
                    <a href="#">温州</a>
                    <a href="#">沈阳</a>
                    <a href="#">长春</a>
                    <a href="#">大连</a>
                    <a href="#">青岛</a>
                    <a href="#">济南</a>
                    <a href="#">福州</a>
                    <a href="#">厦门</a>
                    <a href="#">昆明</a>
                    <a href="#">贵阳</a>
                    <a href="#">南宁</a>
                    <a href="#">常州</a>
                    <a href="#">海口</a>
                    <a href="#">太原</a>
                    <a href="#">兰州</a>
                    <a href="#">唐山</a>
                    <a href="#">东莞</a>
                    <a href="#">佛山</a>
                    <a href="#">宁波</a>
                    <a href="#">无锡</a>
                    <a href="#">哈尔滨</a>
                    <a href="#">石家庄</a>
                    <a href="#">呼和浩特</a>
                    <a href="#">乌鲁木齐</a>
                    <a href="#">更多>></a>
                  </div>
                </div>
              </div>
              <ul class="cate-list cate-list-inline">
                <li><a href="#">元祖</a></li>
                <li><a href="#">幸福西饼</a></li>
                <li><a href="#">21cake</a></li>
                <li><a href="#">诺心蛋糕</a></li>
                <li><a href="#">窝夫小子</a></li>
                <li><a href="#">BONCAKE</a></li>
              </ul>
            </div>
            <div class="dropdown-cate-item cate-pop">
              <h4>
                <a href="#">礼品</a> / <a href="#">公仔</a> /
                <a href="#">绿植</a>
                <span class="icon icon-arrow-right"></span>
              </h4>
              <div class="right-pop">
                <div class="right-pop-list">
                  <p class="right-pop-title">礼品品牌</p>
                  <div class="right-pop-items square">
                    <a href="#"
                      ><img
                        src="../../assets/images/homeimg/w/brand_SWAROVSKI.png"
                      />
                      <p>施华洛世奇</p>
                    </a>
                    <a href="#"
                      ><img
                        src="../../assets/images/homeimg/w/brand_GlamEver.png"
                      />
                      <p>Glam Ever潮牌饰品</p>
                    </a>
                    <a href="#"
                      ><img
                        src="../../assets/images/homeimg/w/brand_Dior.png"
                      />
                      <p>迪奥Dior</p>
                    </a>
                    <a href="#"
                      ><img src="../../assets/images/homeimg/w/brand_MW.png" />
                      <p>猫王收音机</p>
                    </a>
                    <a href="#"
                      ><img
                        src="../../assets/images/homeimg/w/brand_HelloKitty.png"
                      />
                      <p>Hello Kitty</p>
                    </a>
                  </div>
                </div>
                <div class="right-pop-list">
                  <p class="right-pop-title">礼品类别</p>
                  <div class="right-pop-items">
                    <a href="#"
                      ><img
                        src="../../assets/images/homeimg/w/sort_Musicbox.png"
                      />
                      <p>音乐盒</p>
                    </a>
                    <a href="#"
                      ><img
                        src="../../assets/images/homeimg/w/sort_Goldfoilflower.png"
                      />
                      <p>金箔花</p>
                    </a>
                    <a href="#"
                      ><img
                        src="../../assets/images/homeimg/w/sort_3DCrystal.png"
                      />
                      <p>3D水晶内雕</p>
                    </a>
                    <a href="#"
                      ><img
                        src="../../assets/images/homeimg/w/sort_JewelryBeauty.png"
                      />
                      <p>首饰/美妆</p>
                    </a>
                    <a href="#"
                      ><img
                        src="../../assets/images/homeimg/w/sort_Chocolates.png"
                      />
                      <p>巧克力</p>
                    </a>
                    <a href="#"
                      ><img
                        src="../../assets/images/homeimg/w/sort_dolls.png"
                      />
                      <p>公仔/睡枕</p>
                    </a>
                    <a href="#"
                      ><img
                        src="../../assets/images/homeimg/w/sort_OrnamentsOthers.png"
                      />
                      <p>摆件/其他</p>
                    </a>
                    <a href="#"
                      ><img
                        src="../../assets/images/homeimg/w/Plants_Green.png"
                      />
                      <p>绿色植物</p>
                    </a>
                    <a href="#"
                      ><img
                        src="../../assets/images/homeimg/w/Plants_Potted.png"
                      />
                      <p>盆栽花卉</p>
                    </a>
                    <a href="#"
                      ><img
                        src="../../assets/images/homeimg/w/Plants_Succulent.png"
                      />
                      <p>多肉植物盆栽</p>
                    </a>
                    <a href="#"
                      ><img
                        src="../../assets/images/homeimg/w/sort_Yinxiang.png"
                      />
                      <p>蓝牙音箱</p>
                    </a>
                  </div>
                </div>
              </div>
              <ul class="cate-list cate-list-inline"></ul>
            </div>
            <div class="dropdown-cate-item cate-list-inline inline"></div>
          </div>
        </div>
        <ul class="navi-nav">
          <li><router-link to='/flower'>鲜花</router-link></li>
          <li><router-link to='/yongflower'>永生花</router-link></li>
          <li><router-link to='/cake'>蛋糕</router-link></li>
          <li><router-link to='/gifts'>礼品</router-link></li>
          <li><router-link to='/chocolates'>巧克力</router-link></li>
          <li><router-link to='/huayu'>花语大全</router-link></li>
          <li><router-link to=''>企业团购</router-link></li>
          <li><router-link to='/you'>设计师臻选鲜花</router-link></li>
          <li><router-link to='/valentine' style="color: #ff734c">情人节鲜花礼物</router-link></li>
        </ul>
      </div>
    </div>
    <!-- 大图轮翻 -->
    <div>
      <el-carousel indicator-position="outside" height="536px">
        <el-carousel-item>
          <img style="width:60% height:100%" src="../../assets/images/homeimg/w/21_birthday_banner_pc.jpg" alt="">
        </el-carousel-item>
        <el-carousel-item>
          <img style="width:60% height:100%" src="../../assets/images/homeimg/w/21_day0314_banner_pc.jpg" alt="">
        </el-carousel-item>
        <el-carousel-item>
          <img style="width:60% height:100%" src="../../assets/images/homeimg/w/20_longtou.jpg" alt="">
        </el-carousel-item>
      </el-carousel>
    </div>
    <!-- 服务 -->
    <div class="main-server">
      <ul>
        <li>
          <a href="#"
            ><span class="icon icon-server-o1"></span>
            <h4>鲜花电商认证龙头企业</h4></a
          >
        </li>
        <li>
          <a href="#"
            ><span class="icon icon-server-o2"></span>
            <h4>15年品牌</h4></a
          >
        </li>
        <li>
          <a href="#"
            ><span class="icon icon-server-o4"></span>
            <h4>3小时全国送花</h4></a
          >
        </li>
        <li class="last-child">
          <a href="#"
            ><span class="icon icon-server-o5"></span>
            <h4>200%退赔承诺</h4></a
          >
        </li>
        <li>
          <a href="#"
            ><span class="icon icon-server-o3"></span>
            <h4>最近402247条评价</h4></a
          >
        </li>
      </ul>
    </div>
    <!-- 节日副banner -->
    <div class="festival">
      <div class="festival-banner">
        <a href="#">
          <img
            src="../../assets/images/homeimg/w/21_valentine_mbanner_pc.png"
            alt=""
            width="1200"
          />
        </a>
      </div>
      <div class="festival-product" style="background-color: #fc5564">
        <div class="festival-list">
          <div class="festival-item" v-for="(item, index) in arr" :key="index">
            <router-link to='/detail'>
              <img
                :src="require('../../assets/images/homeimg/w/' + item.img)"
                alt=""
              />
              <p class="festival-item-name">{{ item.name }}</p>
              <p class="festival-item-desc">{{ item.desc }}</p>
              <p class="festival-item-price">￥{{ item.price }}</p>
            </router-link>
          </div>
        </div>
      </div>
    </div>
    <!-- 场景入口 -->
    <div class="scene clearfix">
      <div class="scene-list">
        <div class="scene-item-vertical">
          <router-link to='/detail'
            ><img
              src="../../assets/images/homeimg/w/home_channel_lover.jpg"
              alt=""
          /></router-link>
        </div>
      </div>
      <div class="scene-list">
        <div class="scene-item-horizontal">
          <router-link to='/detail'
            ><img
              src="../../assets/images/homeimg/w/home_channel_elder.jpg"
              alt=""
          /></router-link>
        </div>
        <div class="scene-item-horizontall">
          <router-link to='/detail'
            ><img
              src="../../assets/images/homeimg/w/home_channel_friend.jpg"
              alt=""
          /></router-link>
        </div>
      </div>
      <div class="scene-list">
        <div class="scene-item-vertical">
          <router-link to='/detail'
            ><img
              src="../../assets/images/homeimg/w/home_channel_birthday.jpg"
              alt=""
          /></router-link>
        </div>
      </div>
      <div class="scene-list">
        <div class="scene-item-horizontal">
          <div class="scene-item-vertical-mini">
            <router-link to='/detail'
              ><img
                src="../../assets/images/homeimg/w/home_channel_express.jpg"
                alt=""
            /></router-link>
          </div>
          <div class="scene-item-vertical-mini ii">
            <router-link to='/detail'
              ><img
                src="../../assets/images/homeimg/w/home_channel_business.png"
                alt=""
            /></router-link>
          </div>
        </div>
        <div class="scene-item-horizontall">
          <router-link to='/detail'
            ><img
              src="../../assets/images/homeimg/w/home_channel_you_2.jpg?v2"
              alt=""
          /></router-link>
        </div>
      </div>
    </div>
    <!-- 新品来袭 -->
    <div class="scene clearfix">
      <div class="scene-list">
        <div class="scene-item-vertical">
          <router-link to='/detail'>
            <img
              src="../../assets/images/homeimg/w/home_channel_rexiao.png"
              alt=""
            />
          </router-link>
        </div>
      </div>
      <div class="scene-list">
        <div class="scene-item-vertical">
          <router-link to='/detail'>
            <img
              src="../../assets/images/homeimg/w/home_channel_tejia.png"
              alt=""
            />
          </router-link>
        </div>
      </div>
      <div class="scene-list">
        <div class="scene-item-vertical">
          <router-link to='/detail'>
            <img
              src="../../assets/images/homeimg/w/home_channel_xinpin.png"
              alt=""
            />
          </router-link>
        </div>
      </div>
      <div class="scene-list">
        <div class="scene-item-vertical">
          <router-link to='/detail'>
            <img
              src="../../assets/images/homeimg/w/home_channel_pinwei.png"
              alt=""
            />
          </router-link>
        </div>
      </div>
    </div>
    <!-- 楼层 爱情鲜花 -->
    <div class="fl f-lover">
      <div class="fl-container">
        <div class="hd">
          <router-link to='/detail' class="more"
            >更多爱情鲜花<span class="icon icon-arrow-right"></span
          ></router-link>
          <h3>
            <a href="#" class="moree">爱情鲜花</a
            ><span class="spas">送 · 让你怦然心动的人</span>
          </h3>
        </div>
        <div class="bd">
          <div class="bd-l">
            <div class="banner-box">
              <router-link to='/detail'
                ><img
                  src="../../assets/images/homeimg/w/home_floor_lover.png"
                  width="288"
                  height="656"
              /></router-link>
              <div class="link-cover">
                <router-link to='/detail'
                  >爱情鲜花专区<span class="icon icon-dotarrow"></span
                ></router-link>
              </div>
            </div>
          </div>
        </div>
        <div class="fl-products">
          <div
            class="fl-products-item"
            v-for="(item, index) in flover"
            :key="index"
          >
            <router-link to='/detail'>
              <div class="img-box" href="#">
                <img
                  :src="require('../../assets/images/homeimg/w/' + item.img)"
                  alt=""
                  height="240"
                  width="220"
                />
              </div>
                <p class="product-title">{{ item.title }}</p>
                <p class="product-price">&yen; {{ item.price }}</p>
                <p class="product-sell">已售 {{ item.sell }} 件</p>
            </router-link>
          </div>
        </div>
      </div>
    </div>
    <!-- 楼层 长辈鲜花 -->
    <div class="fl f-elder">
      <div class="fl-container">
        <div class="hd">
          <router-link to='/detail' class="more"
            >更多送长辈鲜花<span class="icon icon-arrow-right"></span
          ></router-link>
          <h3>
            <a href="#" class="moree">送长辈鲜花</a
            ><span class="spas">赠 · 父母/恩师/长辈</span>
          </h3>
        </div>
        <div class="bd">
          <div class="bd-l">
            <div class="banner-box">
              <router-link to='/detail'
                ><img
                  src="../../assets/images/homeimg/w/home_floor_elder.png"
                  width="288"
                  height="656"
              /></router-link>
              <div class="link-cover">
                <router-link to='/detail'
                  >送长辈鲜花专区<span class="icon icon-dotarrow"></span
                ></router-link>
              </div>
            </div>
          </div>
        </div>
        <div class="fl-products">
          <div
            class="fl-products-item"
            v-for="(item, index) in felder"
            :key="index"
          >
            <router-link to='/detail'>
              <div class="img-box" href="#">
                <img
                  :src="require('../../assets/images/homeimg/w/' + item.img)"
                  alt=""
                  height="240"
                  width="220"
                />
              </div>
                <p class="product-title">{{ item.title }}</p>
                <p class="product-price">&yen; {{ item.price }}</p>
                <p class="product-sell">已售 {{ item.sell }} 件</p>
            </router-link>
          </div>
        </div>
      </div>
    </div>
    <!-- 楼层 永生花 -->
    <div class="fl f-song">
      <div class="fl-container">
        <div class="hd">
          <router-link to='/detail' class="more"
            >更多爱情鲜花<span class="icon icon-arrow-right"></span
          ></router-link>
          <h3>
            <router-link to='/detail' class="moree">永生花</router-link
            ><span class="spas">许 · 她一生承诺</span>
          </h3>
        </div>
        <div class="bd">
          <div class="bd-l">
            <div class="banner-box">
              <router-link to='/detail'
                ><img
                  src="../../assets/images/homeimg/w/home_floor_song.jpg"
                  width="288"
                  height="656"
              /></router-link>
              <div class="link-cover">
                <router-link to='/detail'
                  >爱情鲜花专区<span class="icon icon-dotarrow"></span
                ></router-link>
              </div>
            </div>
          </div>
        </div>
        <div class="fl-products">
          <div
            class="fl-products-item"
            v-for="(item, index) in fsong"
            :key="index"
          >
            <router-link to='/detail'>
              <div class="img-box" href="#">
                <img
                  :src="require('../../assets/images/homeimg/w/' + item.img)"
                  alt=""
                  height="240"
                  width="220"
                />
              </div>
                <p class="product-title">{{ item.title }}</p>
                <p class="product-price">&yen; {{ item.price }}</p>
                <p class="product-sell">已售 {{ item.sell }} 件</p>
            </router-link>
          </div>
        </div>
      </div>
    </div>

    <!-- 谢广 -->
    <!-- 蛋糕 | 一起品味甜蜜时光 -->
    <div class="daogao">
      <div class="dg-head">
        <a href="#">蛋糕 </a><span>| 一起品味甜蜜时光</span>
        <a href="#" class="head-right">更多蛋糕></a>
      </div>
      <div class="dg-center">
        <div class="dangao-nav">
          <div class="pscs">
            <span class="icon"></span><span>配送城市</span> <span>请选择</span
            ><span class="icon1"></span>
          </div>
          <ul>
            <li>北京</li>
            <li>上海</li>
            <li>广州</li>
            <li>深圳</li>
            <li>广州</li>
            <li>天津</li>
            <li>重庆</li>
            <li>成都</li>
            <li>沈阳</li>
            <li>武汉</li>
            <li>西安</li>
            <li>杭州</li>
            <li>南京</li>
            <li>苏州</li>
            <li>长沙</li>
            <li>更多</li>
          </ul>
        </div>
        <ul class="dangao-cen">
          <li>
             <router-link to='/detail'>
            <img src="../../assets/images/homeimg/img1.png" alt="" />
            <p>元祖蛋糕</p>
             </router-link>
          </li>
          <li>
             <router-link to='/detail'>
            <img src="../../assets/images/homeimg/img2.png" alt="" />
            <p>幸福西饼蛋糕</p>
             </router-link>
          </li>
          <li>
             <router-link to='/detail'>
            <img src="../../assets/images/homeimg/img3.png" alt="" />
            <p>甘一客蛋糕</p>
             </router-link>
          </li>
          <li>
             <router-link to='/detail'>
            <img src="../../assets/images/homeimg/img4.png" alt="" />
            <p>BONCAKE蛋糕</p>
             </router-link>
          </li>
          <li>
             <router-link to='/detail'>
            <img src="../../assets/images/homeimg/img5.png" alt="" />
            <p>窝夫子小蛋糕</p>
             </router-link>
          </li>
          <li>
             <router-link to='/detail'>
            <img src="../../assets/images/homeimg/img6.png" alt="" />
            <p>CAKEBOSS蛋糕</p>
             </router-link>
          </li>
          <li>
             <router-link to='/detail'>
            <img src="../../assets/images/homeimg/img7.png" alt="" />
            <p>Mcake蛋糕</p>
             </router-link>
          </li>
          <li>
             <router-link to='/detail'>
            <img src="../../assets/images/homeimg/img8.png" alt="" />
            <p>心之和蛋糕</p>
             </router-link>
          </li>
          <li>
             <router-link to='/detail'>
            <img src="../../assets/images/homeimg/img9.png" alt="" />
            <p>派悦坊蛋糕</p>
             </router-link>
          </li>
          <li>
             <router-link to='/detail'>
            <img src="../../assets/images/homeimg/img10.png" alt="" />
            <p>米卡米卡蛋糕</p>
             </router-link>
          </li>
          <li>
             <router-link to='/detail'>
            <img src="../../assets/images/homeimg/img11.png" alt="" />
            <p>诺心蛋糕</p>
             </router-link>
          </li>
          <li>
             <router-link to='/detail'>
            <img src="../../assets/images/homeimg/img12.png" alt="" />
            <p>Vcake蛋糕</p>
             </router-link>
          </li>
          <li>
             <router-link to='/detail'>
            <img src="../../assets/images/homeimg/img13.png" alt="" />
            <p>黑池蛋糕</p>
             </router-link>
          </li>
          <li>
             <router-link to='/detail'>
            <img src="../../assets/images/homeimg/img14.png" alt="" />
            <p>巴黎贝甜蛋糕</p>
             </router-link>
          </li>
          <li>
             <router-link to='/detail'>
            <img src="../../assets/images/homeimg/img15.png" alt="" />
            <p>全国蛋糕</p>
             </router-link>
          </li>
        </ul>
      </div>

      <ul class="dangaoul">
        <li v-for="(item, index) in dangao" :key="index">
           <router-link to='/detail'>
          <div>
            
            <img
            :src="require('../../assets/images/homeimg/' + item.img)"
            alt=""
          /></div>
          <p>{{ item.title }}</p>
          <h4>&yen;{{ item.price }}</h4>
          <span>已售{{ item.sell }}件</span>
           </router-link>
        </li>
      </ul>
    </div>

    <!-- 礼品 | 给她.最美好的礼物 -->
    <div class="gift">
      <div class="dg-head">
        <a href="#">礼品 </a><span>| 给她.最美好的礼物</span>
        <a href="#" class="head-right">更多礼物></a>
      </div>
      <div class="dg-center">
        <ul class="gift-nav">
          <li>水晶内雕/3D激光内雕水晶</li>
          <li>进口/泰国保鲜花</li>
          <li>金箔玫瑰/金箔画</li>
          <li>精品音乐盒/八音盒</li>
          <li>生日礼品</li>
          <li>约会/求爱礼品</li>
          <li>结婚礼品</li>
          <li>感谢/祝福礼品</li>
          <li>拜访/探望礼品</li>
          <li>结婚纪念日礼品</li>
        </ul>
        <ul class="dangao-cen">
          <li>
             <router-link to='/detail'>
            <img src="../../assets/images/homeimg/present1.png" alt="" />
            <p>施华洛世奇</p>
             </router-link>
          </li>
          <li>
             <router-link to='/detail'>
            <img src="../../assets/images/homeimg/present2.png" alt="" />
            <p>Glam Ever潮牌饰品</p>
             </router-link>
          </li>
          <li>
             <router-link to='/detail'>
            <img src="../../assets/images/homeimg/present3.png" alt="" />
            <p>迪奥Dior</p>
             </router-link>
          </li>
          <li>
             <router-link to='/detail'>
            <img src="../../assets/images/homeimg/present4.png" alt="" />
            <p>猫王收音机</p>
             </router-link>
          </li>
          <li>
             <router-link to='/detail'>
            <img src="../../assets/images/homeimg/present5.png" alt="" />
            <p>Hello Kitty</p>
             </router-link>
          </li>
        </ul>
      </div>

      <ul class="dangaoul">
        <li v-for="(item, index) in gift" :key="index">
           <router-link to='/detail'>
          <div> 
          <img :src="require('../../assets/images/homeimg/' + item.img)" alt=""/>
          </div>
          <p>{{ item.title }}</p>
          <h4>&yen;{{ item.price }}</h4>
          <span>已售{{ item.sell }}件</span>
           </router-link>
        </li>
      </ul>
    </div>

    <!-- 晒单评价 | 用户实拍晒单 -->
    <div class="evaluate">
      <div class="dg-head">
        <a href="#">晒单评价</a><span>| 用户实拍晒单</span>
        <a href="#" class="head-right">查看所有评价></a>
      </div>

      <!-- <ul class="dangaoul">
        <li v-for="(item,index) in dangao" :key="index">
          <img :src="require('../../assets/images/homeimg/'+item.img)" alt="">
          <p>{{item.title}}</p>
          <h4>&yen;{{item.price}}</h4>
          <span>已售{{item.sell}}件</span>
        </li>
      </ul> -->
      <ul class="evaluate1">
        <li v-for="(item, index) in evaluate" :key="index">
           <router-link to='/detail'>
          <div class="left">
            
            <img
              :src="require('../../assets/images/homeimg/' + item.img)"
              alt=""
            />
            <span class="span1">{{ item.txt }}</span>
            <p>{{ item.title }}</p>
            <span>{{ item.text }}</span
            ><br />
            <span>{{ item.time }}</span>
          </div>
          <div class="right">
            <img
              :src="require('../../assets/images/homeimg/' + item.images)"
              alt=""
            />
          </div>
           </router-link>
        </li>
      </ul>
    </div>
    <!-- 热门咨询 -->
    <div class="service">
      <div class="box1">
        <div class="left">热门资讯</div>
        <div class="right">更多></div>
      </div>
      <div class="box2">
        <div class="row">
          <ul class="col-md-4">
            <li><span>情人节鲜花礼物</span></li>
            <li><span>鲜花寓意 浪漫花语</span></li>
            <li><span>女孩都喜欢别人送鲜花吗？</span></li>
            <li><span>给爷爷送花有哪些选择？给老人送花</span></li>
            <li><span>送花的含义，生活中怎么送花？</span></li>
            <li><span>心动满分的情人节花束，让情人节甜</span></li>
            <li><span>情人节快到啦，以下两款鲜花很适合</span></li>
          </ul>
          <ul class="col-md-4">
            <li><span>黄圣依正式签约担任品牌形象代言人</span></li>
            <li><span>通用送花祝福语-经典送花祝福语</span></li>
            <li><span>表白应该送几朵玫瑰？告白玫瑰送几</span></li>
            <li><span>送花要注意什么？如何给老人，爱人</span></li>
            <li><span>送女朋友鲜花，送花卡片写什么？</span></li>
            <li><span>过年在家里摆这些花，喜气洋洋又漂</span></li>
            <li><span>有哪些做得漂亮又很美味的生日蛋糕</span></li>
          </ul>
          <ul class="col-md-4">
            <li><span>鲜花枝数与其对应的含意</span></li>
            <li><span>送花的常识与技巧</span></li>
            <li><span>最近要买礼物的男生速点！一大波新</span></li>
            <li><span>12星座异地恋如何维持？送你一份</span></li>
            <li><span>异地恋有大招，教你不分手！</span></li>
            <li><span>春节走亲戚带什么礼物去？</span></li>
            <li><span>情人节给女朋友送花，应该买什么花</span></li>
          </ul>
        </div>
      </div>

      <div class="box3">
        <ul>
          <li>
            <span class="icon1"></span>
            <span class="myspan">15年品牌</span>
          </li>
           <li>
            <span class="icon2"></span>
            <span class="myspan">3小时配送</span>
          </li>
           <li>
            <span class="icon3"></span>
            <span class="myspan">订单实拍</span>
          </li>
           <li>
            <span class="icon4"></span>
            <span class="myspan">200%退赔承诺</span>
          </li>
           <li>
            <span class="icon5"></span>
            <span class="myspan">销量领先</span>
          </li>
           <li>
            <span class="icon6"></span>
            <span class="myspan">百万客户信赖</span>
          </li>
           <li>
            <span class="icon7"></span>
            <span class="myspan">低价保障</span>
          </li>
           <li>
            <span class="icon8"></span>
            <span class="myspan">时尚原创花艺</span>
          </li>
        </ul>
      </div>

      <div class="box4">
        <div class="row">
        <dl class="col-md-2">
          <dt>客户服务</dt>
          <dd>服务声明</dd>
          <dd>常见问题</dd>
          <dd>售后服务</dd>
          <dd>配送说明</dd>
          <dd>配送范围</dd>
          <dd>订单查询</dd>
          <dd>取消订单</dd>
          <dd>补交货款</dd>
          <dd>隐私条款</dd>
          <dd>安全条款</dd>
        </dl>
        <dl class="col-md-2">
          <dt>热门资讯</dt>
          <dd>中国鲜花礼品网购物流程</dd>
          <dd>中国鲜花礼品网订购演示</dd>
          <dd>鲜花网能配送哪些城市？</dd>
          <dd>鲜花售后服务是怎么样的？</dd>
          <dd>我应该提前多久预订鲜花？</dd>
        </dl>
        <dl class="col-md-2">
          <dt>同城鲜花专区</dt>
          <dd>深圳鲜花</dd>
          <dd>广州鲜花</dd>
          <dd>上海鲜花</dd>
          <dd>北京鲜花</dd>
          <dd>天津鲜花</dd>
          <dd>重庆鲜花</dd>
          <dd>成都鲜花</dd>
          <dd>西安鲜花</dd>
          <dd>武汉鲜花</dd>
          <dd>南京鲜花</dd>
          <dd>厦门鲜花</dd>
          <dd>更多城市</dd>
        </dl>
        <dl class="col-md-2">
          <dt>联系我们</dt>
          <dd>全国订购热线：400-889-8188(免长途费)</dd>
          <dd>E-mail: kefu@hua.com</dd>
          <dd>7x24小时在线订购</dd>
          <dd>客服工作时间：8:30-21:00</dd>
          <dd class="mydd"><span class="left"></span> <span class="right">在线客服</span></dd>
        </dl>
        <dl class="col-md-2 mydl">
          <img src="../../assets/images/homeimg/erweima1.png" alt="">
          <p>扫码下载手机版</p>
        </dl>
        <dl class="col-md-2  mydl">
           <img src="../../assets/images/homeimg/erweima2.png" alt="">
          <p>关注公众号有惊喜</p>
        </dl>
        </div>
      </div>

    </div>
   <!-- <footer-page></footer-page> -->
    <side-Page></side-Page>
  </div>
</template>
<script>

import sidePage from "../../components/Side/side.vue"
export default {
  components:{
    sidePage
  },
  data() {
    return {
      arr: [],
      flover: [],
      felder: [],
      fsong: [],
      dangao: [],
      gift: [],
      evaluate: [],
    };
  },
  mounted() {
    this.$axios.get("../../static/data/home.json").then((res) => {
      console.log(res);
      this.arr = res.data.data;
      console.log(this.arr);
    });
    this.$axios.get("../../static/data/home.json").then((res) => {
      console.log(res);
      this.flover = res.data.flover;
      console.log(this.arr);
    });
    this.$axios.get("../../static/data/home.json").then((res) => {
      console.log(res);
      this.felder = res.data.felder;
      console.log(this.arr);
    });
    this.$axios.get("../../static/data/home.json").then((res) => {
      console.log(res);
      this.fsong = res.data.fsong;
      console.log(this.arr);
    });
    this.$axios.get("../../static/data/home.json").then((res) => {
      console.log(res);
      this.dangao = res.data.dangao;
      console.log(this.arr);
    });
    this.$axios.get("../../static/data/home.json").then((res) => {
      console.log(res);
      this.gift = res.data.gift;
      console.log(this.arr);
    });
    this.$axios.get("../../static/data/home.json").then((res) => {
      console.log(res);
      this.evaluate = res.data.evaluate;
      console.log(this.arr);
    });
  },
};
$(function () {
  $(".menu").hover(
    function () {
      console.log(1);
      $(this).find(".dropdown-box").css("display", "block");
    },
    function () {
      $(this).find(".dropdown-box").css("display", "none");
    }
  );
  $(".cate-pop").hover(
    function () {
      console.log(1);
      $(this).children("div").show(); //让相应二级内容显示
      $(this).toggleClass("orange");
    },
    function () {
      $(this).children("div").hide(); //让相应二级内容隐藏
      $(this).toggleClass("orange");
    }
  );
});
</script>
<style scoped lang='less'>
// 顶部导航
#topbanner {
  background: url(../../assets/images/homeimg/w/21_logoupdate_banner_top.png)
    50% 0 no-repeat;
  height: 80px;
}
.top-nav {
  min-width: 1200px;
  height: 40px;
  font-size: 12px;
  color: #71797f;
  background-color: #f3f5f7;
  .top-nav-wrapper {
    width: 1200px;
    margin: 0 auto;
    .top-nav-l {
      float: left;
      .menu {
        position: relative;
        padding: 0 16px;
        line-height: 40px;
        float: left;
        list-style: none;
        .dropdown-box {
          display: none;
          position: absolute;
          top: 100%;
          left: -1px;
          width: 160px;
          padding: 12px;
          font-size: 12px;
          line-height: 18px;
          color: #232628;
          background: #fff;
          border: 1px solid #e9ecf0;
          border-top-color: transparent;
          text-align: center;
          z-index: 1000;
        }
        .dropdown-box-service {
          width: 100%;
          min-width: 100%;
          max-width: 100%;
          padding: 6px 0;
          -webkit-box-sizing: content-box;
          box-sizing: content-box;
        }
        .dropdown-box .open {
          display: block;
        }
        a {
          text-decoration: none;
          color: inherit;
          span.icon {
            display: inline-block;
            background-image: url(../../assets/images/homeimg/w/common_sprite.png);
            background-repeat: no-repeat;
            vertical-align: top;
            width: 14px;
            height: 14px;
            margin-top: 12px;
            margin-right: 4px;
          }
          .icon-star {
            background-position: 0 -21px;
          }
          .icon-weixin {
            background-position: -24px -21px;
          }
          .icon-mobile {
            background-position: -48px -21px;
          }
        }
        :hover {
          color: #ff734c;
        }

        .menu-dropdown {
          position: relative;
        }
      }
      :hover.dropdown-box {
        display: block;
      }
    }
    .top-nav-r {
      float: right;
      .menu {
        padding: 0 16px;
        line-height: 40px;
        float: left;
        list-style: none;
        position: relative;
        .dropdown-box {
          display: none;
          position: absolute;
          top: 100%;
          // bottom: 0;
          left: -1px;
          min-width: 160px;
          padding: 12px;
          font-size: 12px;
          line-height: 18px;
          color: #232628;
          background: #fff;
          border: 1px solid #e9ecf0;
          border-top-color: transparent;
          text-align: center;
          z-index: 1000;
        }
        .dropdown-box-service {
          padding: 6px 0; 
        }
        .icon-arrow {
          display: inline-block;
          width: 8px;
          height: 8px;
          margin-left: 5px;
          background-image: url(../../assets/images/homeimg/w/top_nav_arrow.png);
          background-position: top center;
          background-size: 8px 8px;
        }
        .text-primary {
          color: #ff6a00;
        }
      }
      a {
          text-decoration: none;
          color: inherit;
        }
        :hover {
          color: #ff734c;
      }
    }
  }
}
// 头部
#header {
  min-width: 1200px;
  height: 120px;
  background-color: #f7f9fa;
  .header-container {
    position: relative;
    width: 1200px;
    margin: 0 auto;
    font-size: 0;
    .logo {
      float: left;
      width: 238px;
      height: 100%;
      .logo-nav {
        display: inline-block;
        width: 238px;
        height: 60px;
        margin-top: 30px;
        background-image: url(../../assets/images/homeimg/w/common_sprite.png);
        background-repeat: no-repeat;
        background-position: 0 -248px;
      }
    }
    .search-box {
      width: 440px;
      margin: 0 auto;
      padding-top: 25px;
      font-size: 0;
      .search-box-group {
        position: relative;
        width: 440px;
        height: 48px;
        border-radius: 24px;
        border: 2px solid #ff734c;
        overflow: hidden;
        .search-box-icon {
          display: inline-block;
          width: 54px;
          height: 100%;
          vertical-align: top;
          text-align: center;
          span.icon {
            display: inline-block;
            width: 16px;
            height: 16px;
            margin-top: 16px;
            background-image: url(../../assets/images/homeimg/w/common_sprite.png);
            background-repeat: no-repeat;
            vertical-align: top;
          }
          span.icon-search {
            background-position: 0 -48px;
          }
        }
        .search-box-input {
          width: 264px;
          height: 100%;
          font-size: 14px;
          border: none;
          outline: none;
          background-color: inherit;
        }
        .search-box-btn {
          position: absolute;
          top: -2px;
          right: -2px;
          width: 118px;
          height: 48px;
          button {
            width: 100%;
            height: 100%;
            border-radius: 24px 0 0 24px;
            outline: none;
            font-size: 18px;
            font-weight: bold;
            background-color: #ff734c;
          }
          .btn-primary {
            color: #ffffff;
            background-color: #ff6a00;
            border-color: #ff6a00;
          }
        }
      }
      .search-box-hotwords {
        margin-top: 8px;
        margin-left: 44px;
        font-size: 12px;
        line-height: 16px;
        a {
          margin: 0 12px;
          color: #b4babf;
        }
        :hover {
          color: #ff734c;
          text-decoration: none;
        }
      }
    }
    .service {
      position: absolute;
      top: 0;
      right: 0;
      width: 350px;
      padding-top: 25px;
      line-height: 18px;
      text-align: right;
      .service-item {
        display: inline-block;
        font-size: 14px;
        color: #71797f;
        vertical-align: top;
        margin-left: 25px;
        span.icon {
          display: inline-block;
          width: 24px;
          height: 24px;
          margin-top: 12px;
          margin-right: 8px;
          background-image: url(../../assets/images/homeimg/w/common_sprite.png);
          background-repeat: no-repeat;
        }
      }
      span.icon-phone {
        background-position: 0 -102px;
      }
      .icon-headset {
        background-position: -34px -102px;
      }
      .service-item-info {
        display: inline-block;
        margin-top: 15px;
        vertical-align: top;
        text-align: left;
        color: #71797f;
      }
      :hover {
        color: #ff734c;
        text-decoration: none;
      }
    }
  }
}
// 导航
#navi {
  position: relative;
  min-width: 1200px;
  height: 52px;
  background-color: #f7f9fa;
  border-bottom: 1px solid #e9ecf0;
  .navi-container {
    width: 1200px;
    height: 100%;
    margin: 0 auto;
  }
  .navi-categorys {
    position: relative;
    width: 240px;
    height: 52px;
    float: left;
    border-radius: 12px 12px 0 0;
    background-color: #ff734c;
    .categorys-title {
      padding-left: 24px;
      font-size: 18px;
      line-height: 83px;
      font-weight: bold;
      span.icon {
        display: inline-block;
        width: 24px;
        height: 24px;
        margin-top: 0px;
        margin-right: 5px;
        background-image: url(../../assets/images/homeimg/w/common_sprite.png);
        background-repeat: no-repeat;
        vertical-align: top;
      }
      span.icon-category {
        background-position: -65px -105px;
      }
      a {
        color: #fff;
        .fll {
          display: inline-block;
          width: 120px;
          height: 40px;
          position: absolute;
          margin-top: -33px;
          margin-left: 10px;
        }
      }
    }
    .dropdown-cate {
      position: absolute;
      top: 52px;
      left: 0;
      height: 535px;
      padding-top: 10px;
      color: #fff;
      background: url(../../assets/images/homeimg/w/black-bg.png);
      z-index: 999;
    }
    .dropdown-cate-item {
      padding: 9px 0px 9px 20px;
      border-bottom: 1px dashed rgba(255, 255, 255, 0.2);
      h4 {
        margin-top: 2px;
        padding-left: 4px;
        padding-right: 28px;
        font-size: 16px;
        line-height: 20px;
        font-weight: bold;
        a {
          text-decoration: none;
          color: inherit;
        }
        :hover {
          color: #ff734c;
        }
      }
      a {
        color: inherit;
        text-decoration: none;
      }
      span.icon {
        display: inline-block;
        width: 12px;
        height: 12px;
        float: right;
        margin-top: 4px;
        background-image: url(../../assets/images/homeimg/w/common_sprite.png);
        background-repeat: no-repeat;
        vertical-align: top;
        span.icon-arrow-right {
          background-position: -44px 0;
        }
      }
      .cate-list-inline {
        margin-top: 5px;
        li {
          display: inline-block;
          font-size: 14px;
          line-height: 24px;
          padding: 0 4px;
          a {
            text-decoration: none;
            color: inherit;
          }
          :hover {
            color: #ff734c;
          }
        }
      }
      .right-pop {
        display: none;
        position: absolute;
        top: 1px;
        left: 0;
        margin-left: 240px;
        padding: 20px 36px;
        width: 960px;
        height: 535px;
        background-color: #ffffff;
        z-index: 9999;
        .right-pop-list {
          margin-bottom: 10px;
          .right-pop-title {
            margin-bottom: 16px;
            font-size: 14px;
            line-height: 22px;
            color: #232628;
          }
          .right-pop-items {
            color: #71797f;
            font-size: 0;
            .cities a {
              display: inline;
              margin-right: 16px !important;
              font-size: 12px;
              line-height: 24px;
              color: black;
            }
          }
          a {
            display: inline-block;
            width: 108px;
            margin-right: 22px;
            margin-bottom: 30px;
            text-align: center;
          }
          img {
            width: 68px;
          }
          p {
            margin-top: 4px;
            font-size: 12px;
            line-height: 16px;
          }
          .cities {
            a {
            display: inline;
            margin-right: 16px !important;
            font-size: 12px;
            line-height: 24px;
            }
            :hover{
              color: #ff734c;
            }
          }
        }
      }
    }
    :last-child {
      border-bottom: none;
    }
    .orange{
      background-color: #ffffff;
      color: #71797f;
      a{
        color: #232628;
      }
    }
  }
}
#navi .navi-nav {
  margin: 0 0 0 265px;
  height: 100%;
  list-style: none;
  li {
    margin: 13px 14px;
    float: left;
    a {
      text-decoration: none;
      color: inherit;
      font-weight: bold;
      font-size: 18px;
    }
    :hover {
      color: #ff734c;
    }
  }
}
// 大图轮翻
.el-carousel__item {
  h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 150px;
  margin: 0;
  }
  img {
    /*设置图片宽度和浏览器宽度一致*/
    width: 100%;
    height: 100%;
  }
}

// .el-carousel__item .Carousel{
//    border-bottom: 1px solid #f1f4f8;
// }
// .el-carousel__arrow  {
//     left: 470px;
//     !important
// }
// .el-carousel__arrow--left {
//     left: 499px!important;
// }
// .el-carousel__arrow--right {
//     right: 265px;
// }

// 未选中状态
.el-carousel__indicator .el-carousel__button {
  background: #959595;
  border-radius: 50%;
  height: 14px;
  width: 14px;
}

// 服务
.main-server {
  width: 1200px;
  height: 60px;
  margin: 0 auto;
  ul {
    font-size: 0;
    list-style: none;
    li {
      width: 216px;
      display: inline-block;
      margin-left: 22px;
      a {
        text-decoration: none;
        color: inherit;
      }
      :hover {
        color: #ff734c;
      }
    }
    :nth-of-type(2) {
      text-align: center;
    }
    h4 {
      margin-left: 35px;
      margin-top: -20px;
    }
    span.icon {
      display: inline-block;
      width: 24px;
      height: 24px;
      margin-top: 18px;
      margin-left: 2px;
      margin-right: 75px;
      background-image: url(../../assets/images/homeimg/w/common_sprite.png);
      background-repeat: no-repeat;
      vertical-align: top;
    }
    span.icon-server-o1 {
      background-position: -102px -102px;
    }
    span.icon-server-o2 {
      background-position: -136px -102px;
    }
    span.icon-server-o4 {
      background-position: -204px -102px;
    }
    span.icon-server-o5 {
      background-position: -238px -102px;
    }
    span.icon-server-o3 {
      background-position: -170px -102px;
    }
  }
}
// 节日副banner
.festival {
  width: 1200px;
  margin: 0 auto;
  .festival-list {
    padding: 20px 16px;
    font-size: 0;
    .festival-item {
      position: relative;
      display: inline-block;
      width: 284px;
      height: 160px;
      margin: 0 4px;
      border-radius: 8px;
      background-color: #fff;
      vertical-align: top;
      overflow: hidden;
    }
    a {
      display: inline-block;
      width: 100%;
      height: 100%;
      padding: 8px 8px 8px 20px;
      text-decoration: none;
    }
    img {
      position: absolute;
      width: 158px;
      height: 144px;
      top: 8px;
      right: 8px;
      z-index: 1;
    }
    .festival-item-name {
      margin-top: 22px;
      color: #232628;
      font-size: 16px;
      line-height: 28px;
    }
    .festival-item-desc {
      color: #71797f;
      font-size: 14px;
      line-height: 26px;
    }
    .festival-item-price {
      margin-top: 18px;
      font-size: 16px;
      line-height: 28px;
      font-weight: bold;
      color: #c26137;
    }
  }
}
// 场景入口
.scene {
  width: 1200px;
  margin: 30px auto 0px;
  font-size: 0;
  .scene-list {
    float: left;
    width: 283px;
    border-radius: 8px;
    overflow: hidden;
    margin-left: 16px;
    .scene-item-vertical {
      width: 100%;
      border-radius: 8px;
      overflow: hidden;
      position: relative;
    }
    .scene-item-horizontal {
      width: 100%;
      border-radius: 8px;
      overflow: hidden;
    }
    .scene-item-horizontall {
      margin-top: 16px;
    }
    .scene-item-vertical-mini {
      display: inline-block;
      width: 136px;
      border-radius: 8px;
      overflow: hidden;
    }
    .ii {
      margin-left: 10px;
    }
  }
}
// 楼层 爱情鲜花
.f-lover {
  background-color: #f7f9fa;
  margin-top: 50px;
}
.f-elder {
  background-color: #e9ecf0;
}
.f-song {
  background-color: #f7f9fa;
  margin-top: 0px;
}
.fl-container {
  width: 1200px;
  margin: 0 auto;
  padding: 20px 0 60px;
  .more {
    font-size: 14px;
    line-height: 30px;
    color: #71797f;
    float: right;
    text-decoration: none;
  }
  .moree {
    color: black;
    text-decoration: none;
  }
  .spas {
    padding-left: 15px;
    margin-left: 16px;
    font-size: 20px;
    line-height: 24px;
    font-weight: normal;
    border-left: 1px solid #71797f;
  }
  .bd {
    margin-top: 14px;
    font-size: 0;
  }
  .bd-l {
    display: inline-block;
    width: 288px;
    vertical-align: top;
    .banner-box {
      position: relative;
    }
    .link-cover {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 160px;
      background-image: url(../../assets/images/homeimg/w/home_linkcover.png);
      a {
        display: block;
        width: 240px;
        height: 60px;
        margin: 74px auto 0;
        border: 2px solid #fff;
        border: 2px solid rgba(255, 255, 255, 0.7);
        font-size: 22px;
        line-height: 56px;
        color: #fff;
        font-weight: bold;
        text-align: center;
        text-decoration: none;
      }
      span.icon {
        display: inline-block;
        width: 20px;
        height: 20px;
        margin-top: 18px;
        margin-left: 12px;
        background-image: url(//img02.hua.com/pc/pimg/home/common_sprite.png);
        background-repeat: no-repeat;
        vertical-align: top;
      }
      span.icon-dotarrow {
        background-position: 0 -72px;
      }
    }
  }
  .fl-products {
    width: 912px;
    float: right;
    margin-top: -655px;
  }
  .fl-products-item {
    display: inline-block;
    width: 212px;
    margin-left: 16px;
    margin-bottom: 16px;
    background-color: #fff;
    .img-box {
      width: 100%;
      height: 228px;
      overflow: hidden;
      text-align: center;
      img {
        width: 100%;
        height: auto;
        vertical-align: bottom;
        text-decoration: none;
        transition: all 0.3s;
      }
    }
    a {
      text-decoration: none;
    
    } 
    .product-title {
      max-width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: 18px;
      line-height: 23px;
    }
    .product-price {
      margin-top: 5px;
      font-size: 16px;
      font-weight: bold;
      line-height: 20px;
    }
    p {
      margin: 10px 0 5px;
      text-align: center;
      color: #232628
    }
  }
  .fl-products-item :hover img {
    transform: scale(1.1);
  }
  .fl-products-item :hover p {
     color: #ff734c;
  }
}

// 谢广
// 蛋糕 | 一起品味甜蜜时光
.daogao {
  height: 1000px;
  width: 100%;
  background-color: #e9ecf0;

  // padding: 0px 240px;

  .dg-head {
    padding-top: 30px;
    width: 1200px;
    margin: auto;
    line-height: 50px;
    a {
      font-weight: bold;
      font-size: 25px;
      color: #000000;
    }
    span {
      font-size: 20px;
    }
    .head-right {
      float: right;
      font-weight: 100;
      font-size: 20px;
    }
  }
  .dg-center {
    height: 560px;
    width: 1200px;
    margin: 0 auto;
    background-color: white;

    .dangao-nav {
      width: 100%;
      height: 40px;
      .pscs {
        float: left;
        //  width: 240px;
        width: 20%;
        height: 40px;
        //  margin-top: 10px;
        background-color: #ff4116;
        border-radius: 0px 50px 50px 0px;
        padding: 0px 20px;
        .icon {
          display: inline-block;
          background-size: 100% 100%;
          background: url(../../assets/images/homeimg/jinglingtu2.png) -23px -41px;
          height: 20px;
          width: 20px;
          margin-top: 6px;
          margin-right: 10px;
        }
        span {
          color: white;
          font-size: 16px;
        }
        span:nth-of-type(2) {
          margin-right: 20px;
        }
        .icon1 {
          display: inline-block;
          background-size: 100% 100%;
          background: url(../../assets/images/homeimg/jinglingtu2.png) 4px 9px;
          height: 20px;
          width: 20px;
        }
      }
      ul {
        float: left;
        //  width: 500px;
        width: 80%;
        height: 40px;
        li {
          float: left;
          margin-left: 24px;
          line-height: 40px;
          list-style: none;
          font-size: 16px;
          font-weight: bold;
        }
      }
    }
    .dangao-cen {
      li {
        height: 100px;
        width: 100px;
        // background-color: yellow;
        float: left;
        margin-top: 50px;
        list-style: none;
        margin-left: 55px;
        text-align: center;
        a{
          text-decoration: none;
        }
        img {
          width: 100%;
          height: 80px;
        }
        p{
          color: #71797F;
         
        
        }
         p:hover{
            color: #FF4116;
         }
      }
    }
  }

  .dangaoul {
    width: 1200px;
    margin: 0 auto;
    height: 300px;
    // background-color: yellow;
    margin-top: 30px;
    overflow: hidden;
    padding: 0px 0px;
    li:hover{
      p,h4,span{
        color: #FF4116;
      }
      
    }
    li {
      a{
        text-decoration: none;
      }
      height: 300px;
      width: 230px;
      padding: 10px 10px;
      float: left;
      text-align: center;
      list-style: none;
      background-color: white;
      margin-right: 10px;
      p {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        color: #000000;
      }
      h4{
        color: #000000;
      }
      span{
        color: #71797F;
      }
      div{
        width: 100%;
        height: 200px;
        overflow: hidden;
         img {
        width: 100%;
        height: 200px;
        transform: all 0.5s;
        vertical-align: bottom;
        // background-color: #000000;
      }
      }
     :hover{
       img{
       transform: scale(1.1);
       }
      
     }
    }
  }
}

//礼品 | 给她.最美好的礼物
.gift {
  height: 1000px;
  width: 100%;
  background-color: #f7f9fa;

  // padding: 0px 240px;

  .dg-head {
    padding-top: 30px;
    width: 1200px;
    margin: auto;
    line-height: 50px;
    a {
      font-weight: bold;
      font-size: 25px;
      color: #000000;
    }
    span {
      font-size: 20px;
    }
    .head-right {
      float: right;
      font-weight: 100;
      font-size: 20px;
    }
  }
  .dg-center {
    height: 180px;
    width: 1200px;
    margin: 0 auto;
    background-color: white;
    .gift-nav {
      li {
        float: left;
        margin-left: 15px;
        list-style: none;
        
           color: #71797F;  
      }
      li:hover{
        color: #FF4117;
        
      }
    }
    .dangao-cen {
      li {
        height: 100px;
        width: 140px;
        // background-color: yellow;
        float: left;
        margin-top: 50px;
        list-style: none;
        margin-left: 55px;
        text-align: center;
        p{
          color: #71797F;
        }
        p:hover{
          color: #ff4117;
        }
        a{
          text-decoration: none;
        }
        img {
          width: 100%;
          height: 80px;
        }
      }
    }
  }

  .dangaoul {
    width: 1200px;
    margin: 0 auto;
    height: 600px;
    // background-color: yellow;
    margin-top: 30px;
    overflow: hidden;
    padding: 0px 0px;
    li:hover{
      p,h4,span{
        color: #ff4117;
      }
    }
    li {
      a{
        text-decoration: none;
      }

      height: 300px;
      width: 230px;
      padding: 10px 10px;
      float: left;
      text-align: center;
      list-style: none;
      background-color: white;
      margin-right: 10px;
      p {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        color: #000000;
      }
      h4{
        color: #000000;
      }
      span{
        color: #71797F;
      }
     
        div{
        width: 100%;
        height: 200px;
        overflow: hidden;
         img {
        width: 100%;
        height: 200px;
        transform: all 0.5s;
        vertical-align: bottom;
        // background-color: #000000;
      }
      }
     :hover{
       img{
       transform: scale(1.1);
       }
     }
    }
  }
}
//晒单评价
.evaluate {
  height: 450px;
  width: 100%;
  background-color: #e9ecf0;
a{
  text-decoration: none;
}
  // padding: 0px 240px;

  .dg-head {
    padding-top: 30px;
    width: 1200px;
    margin: auto;
    line-height: 50px;
    a {
      font-weight: bold;
      font-size: 25px;
      color: #000000;
    }
    span {
      font-size: 20px;
    }
    .head-right {
      float: right;
      font-weight: 100;
      font-size: 20px;
    }
  }
  .evaluate1 {
    width: 1200px;
    margin: 0 auto;
    height: 300px;
    // background-color: red;
    li {
      float: left;
      height: 160px;
      width: 280px;
      list-style: none;
      background-color: white;
      padding: 10px 10px;
      margin-bottom: 10px;
      margin-right: 10px;
      .left {
        float: left;
        width: 58%;
        height: 100%;
        span{
          color: #B4BABF;
        }
        p{
          color: #000000;
        }
        p:hover{
          color: #FF734D;
        }
        .span1 {
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
        // background-color:green ;
        img {
          width: 20px;
          height: 20px;
          border-radius: 50%;
        }
      }
      .right {
        float: right;
        width: 40%;
        height: 100%;
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
}
//热门咨询
.service {
  height: 600px;
  width: 100%;
  background-color: #f7f9fa;
  padding-top: 10px;
  .box1 {
    width: 1200px;
    height: 40px;
    margin: 0px auto;
    background-color: white;
    padding: 0px 20px;
    line-height: 40px;
    border-bottom: 1px solid #E9ECF0;
    .left {
      float: left;
      font-weight: bold;
      font-size: 16px;
    }
    .right {
      float: right;
      font-size: 14px;
    }
  }
  .box2 {
    width: 1200px;
    margin: 0px auto;
    background-color: white;
    // margin-top: 2px;
    padding: 0px 40px;
    li{
      color: #B4BABF;
      span{
        color: #636566;
      }
      span:hover{
         color: #FF734D;
      }
    }
    
  }
  .box3{
    width: 1200px;
    margin: 30px auto;
    background-color: white;
    .li1{
      width: 260px;
      height: 60px;
      background-color: red;
      float: left;
      list-style: none;
      line-height: 60px;
      position: relative;
      margin-bottom: 10px;
      margin-right: 10px;
      .icon1{
          display: inline-block;
          background-size: 100% 100%;
          background: url(../../assets/images/homeimg/jinglingtu2.png) 0px -136px;
          height: 40px;
          width: 40px;
          margin-top: 6px;
          margin-right: 10px;
          position: absolute;
          top: 3px;
      }
      .myspan{
        position: absolute;
       left: 50px;
      }
    }
     li{
      width: 280px;
      height: 60px;
      // background-color: red;
      float: left;
      list-style: none;
      line-height: 60px;
      position: relative;
      margin-bottom: 10px;
      margin-right: 10px;
      font-size: 18px;
      .icon1{
          display: inline-block;
          background-size: 100% 100%;
          background: url(../../assets/images/homeimg/jinglingtu2.png) 0px -136px;
          height: 40px;
          width: 40px;
          margin-top: 6px;
          margin-right: 10px;
          position: absolute;
          top: 3px;
      }
       .icon2{
          display: inline-block;
          background-size: 100% 100%;
          background: url(../../assets/images/homeimg/jinglingtu2.png) -50px -136px;
          height: 40px;
          width: 40px;
          margin-top: 6px;
          margin-right: 10px;
          position: absolute;
          top: 3px;
      }
       .icon3{
          display: inline-block;
          background-size: 100% 100%;
          background: url(../../assets/images/homeimg/jinglingtu2.png) -100px -136px;
          height: 40px;
          width: 40px;
          margin-top: 6px;
          margin-right: 10px;
          position: absolute;
          top: 3px;
      }
      .icon4{
          display: inline-block;
          background-size: 100% 100%;
          background: url(../../assets/images/homeimg/jinglingtu2.png) -150px -136px;
          height: 40px;
          width: 40px;
          margin-top: 6px;
          margin-right: 10px;
          position: absolute;
          top: 3px;
      }
      .icon5{
          display: inline-block;
          background-size: 100% 100%;
          background: url(../../assets/images/homeimg/jinglingtu2.png) -200px -136px;
          height: 40px;
          width: 40px;
          margin-top: 6px;
          margin-right: 10px;
          position: absolute;
          top: 3px;
      }
      .icon6{
          display: inline-block;
          background-size: 100% 100%;
          background: url(../../assets/images/homeimg/jinglingtu2.png) -250px -136px;
          height: 40px;
          width: 40px;
          margin-top: 6px;
          margin-right: 10px;
          position: absolute;
          top: 3px;
      }
      .icon7{
          display: inline-block;
          background-size: 100% 100%;
          background: url(../../assets/images/homeimg/jinglingtu2.png) -300px -136px;
          height: 40px;
          width: 40px;
          margin-top: 6px;
          margin-right: 10px;
          position: absolute;
          top: 3px;
      }
      .icon8{
          display: inline-block;
          background-size: 100% 100%;
          background: url(../../assets/images/homeimg/jinglingtu2.png) -350px -136px;
          height: 40px;
          width: 40px;
          margin-top: 6px;
          margin-right: 10px;
          position: absolute;
          top: 3px;
      }
      .myspan{
        position: absolute;
       left: 50px;
       
      }
       .myspan:hover{
         color: #FF734D;
       }
    }
  }
  .box4{
    border-top: 1px solid #E9ECF0;
    width: 1200px;
    margin: 0px auto;
    height: 100px;
    dt{
      line-height: 30px;
    }
    dd{
      color: #70787E;
      float: left;
      margin-right: 16px;
      line-height: 20px;
      font-size: 10px;
       overflow: hidden;
      white-space: nowrap;
     text-overflow: ellipsis;
         
    }
    .mydl{
     img{
       height: 100px;
     }
    }
     .mydd{
            position: relative;
            width: 100px;
            height: 30px;
            background-color: #FF734C;
            border-radius: 20px 20px ;
            .left{
              width: 25px;
              height: 20px;
                display: inline-block;
          background-size: 100% 100%;
          background: url(../../assets/images/homeimg/jinglingtu2.png) -326px -70px;
          position: absolute;
          top: 2px;
          left:4px;
            }
            .right{
              position: absolute;
              top: 4px;
              left: 40px;
              color: white;
              font-weight: bold;
            }
          
          }
    dd:hover{
      color: #FF734D;
    }
  }
}
</style>